import React, {Component} from 'react';
import { Card,Table,Button,Space,Popconfirm ,message } from 'antd';
function List(props) {
    function confirm(e) {
        console.log(e);
        message.success('Click on Yes');
    }

    function cancel(e) {
        console.log(e);
        message.error('Click on No');
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            width: 80,
            render: (text,record,index) => `${index+1}`,
        },
        {
            title: 'Name',
            dataIndex: 'name',
        },
        {
            title: 'Age',
            dataIndex: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (text,record,index) => {
                return (<div><Space><Button type="primary">编辑</Button>
                    <Popconfirm
                        title="Are you sure to delete this task?"
                        onConfirm={confirm}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <Button type="danger">删除</Button>
                    </Popconfirm>
                </Space>
                </div>)
            }
        }
    ];

    const data = [];
    for (let i = 0; i < 46; i++) {
        data.push({
            key: i,
            name: `Edward King ${i}`,
            age: 32,
            address: `London, Park Lane no. ${i}`,
        });
    }


    return (
        <Card type="inner"  title="商品列表" extra={<Button type="primary" onClick={()=> props.history.push('/admin/products/add')}>新增</Button>}>
            <Table bordered  rowSelection={{type:"checkbox"}}  columns={columns} dataSource={data} />
        </Card>
    );
}

export default List;